.main-box {
    .left-box{
        display: flex;
        flex-direction: column;
        .left-main{
            display: flex;
           background: none;
           .select-city{
            display: flex;
            flex-direction: column;
            .city-box{
                display: flex;
                // justify-content: space-between;
                width: 100%;
                margin: 16px 0;
            }
            select{
                display: inline-block;
                width: auto;
                vertical-align: middle;
                width:120px;
                height:26px;
                background:rgba(255,255,255,0.2);
                border:1px solid rgba(153,153,153,1);
                border-radius:4px;        
                line-height: 26px;
                font-size: 12px;
                font-weight: bold;
                color: #fff;
                background-image: none;
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
                -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                margin-right: 20px;
                option{
                    color: #000;
                }
            }
            .input-box{
                position: relative;
                width:100%;
                height:28px;
                background:rgba(255,255,255,0);
                border:1px solid rgba(20,198,202,1);
                border-radius:4px;
                input{
                    width: 100%;
                    height: 100%;
                    background-color: transparent;
                    border: 0;
                    padding: 0 10px;
                    color: #fff;
                }
                button{
                    position: absolute ;
                    right: 10px;
                    top: 50%;
                    width: 40px;
                    transform: translateY(-50%);
                    background: transparent;
                    border: 0;
                    outline: 0;
                }
            }
        }
        }
        .map-box{
            position: relative;
            width: 100%;
            margin-top: 10px;
            flex: 1;
            .map{
                height: 100%;
            }
            .map-info{
                position: absolute;
                top: 10px;
                right: 10px;
                div{
                    width:300px;
                    padding: 10px;
                    background:rgba(0,0,0,.6);
                    border-radius:6px;
                    clear: both;
                    >p{
                        display: flex;
                        justify-content: space-between;
                        padding: 10px 0;
                        color: #fff;
                        font-size: 14px;
                        i{
                            color: #E15D68;
                        }
                    }
                    ul{
                        display: flex;
                        flex-direction: column;
                        width:280px;
                        li{
                            position: relative;
                            height:30px;
                            // border-bottom: 1px solid #ccc;
                            margin: 5px 0;
                            background:rgba(255,255,255,1);
                            opacity:0.8;
                            border-radius:6px;                   
                            line-height: 30px;
                            font-size: 12px;
                            cursor: pointer;
                            &:first-child::before{
                                opacity: 1;
                            }
                            p{
                                display: block;
                                padding:  0 10px;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                                font-size: 12px;
                                color: #666;
                            }
                            &::before{
                                content: '';
                                position: absolute;
                                top: -5px;
                                right: 0;
                                left: 0;
                                width: 100%;
                                height: 1px;
                                background: #ccc;
                                opacity: .6;
                            }
                            &.active{
                                background:rgba(20,198,202,.6);
                                
                                p{color: #fff;}
                            }
                        }
                    }
                }
                button{
                    width:80px;
                    height:28px;
                    float: right;
                    margin-bottom: 2px;
                    line-height: 28px;
                    border: 0;
                    outline: 0;
                    font-size: 14px;
                    color: #fff;
                    background:rgba(20,198,202,1);
                    border-radius:8px;
                }
            }
        }
        .quantity-box{
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            h4{
                margin-right: 20px;
                color: #fff;
                font-size: 18px;
            }
            p{
                display: flex;
                justify-content: center;
                span{
                    width:28px;
                    height:46px;
                    margin:0 3px;
                    background:rgba(64,127,255,0.2);
                    border-radius:4px;
                    font-size: 38px;
                    color: #FFF000;
                    font-weight: bold;
                    line-height: 46px;
                }
            }
        }
    }
    .right-box{
        display: flex;
        flex-direction: column;
        padding: 0 20px;
        >div{
            background: none;
            color: #ccc;
        }
        .project-details{ 
            .details-box{
                display: flex;
                margin-top: 10px;
                border:1px solid rgba(20,198,202,.4);
                >div{
                    flex: 1;
                }
                font-size: 12px;
                .stage-box{
                    padding:20px ;
                    ul{
                        margin-top:10px;
                        line-height: 32px;
                    }
                }
                p{
                    font-size: 14px;
                }
                .investor-info{
                    display: flex;
                    flex-direction: column;
                    border-left: 1px solid rgba(20,198,202,.4);
                    p{
                        flex: 1;
                        display: flex;
                        justify-content: space-between;
                        width:100%;
                        height:36px;
                        padding:0 10px;
                        border-bottom:1px solid rgba(20,198,202,.4);
                        line-height: 36px;
                        &:last-child{
                            border-bottom: 0;
                        }
                        button{
                            margin: 0 10px;
                            background: transparent;
                            border: 0;
                            outline: 0;
                            color: #14C6CA;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
        .project-list{
            table{
                width: 100%;
                line-height:36px;
                text-align: center;
                th{
                    border: 1px solid rgba(20, 198, 202, 0.4);
                }
                td{
                    border: 1px solid rgba(20, 198, 202, 0.4);
                }
            }
        }
        .project-process{
            display: flex;
            flex: 1;
            flex-direction: column;
            .echarts-box{
                flex: 1;
            }
            .title-box{
                display: flex;
                justify-content: space-between;
                button{
                    margin: 0 10px;
                    background: transparent;
                    border: 0;
                    outline: 0;
                    color: #14C6CA;
                    font-size: 12px;
                }
            }
        }
    }
}